<template>
	<div class="query-onekey-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-row class="rowsearch" :gutter="20" justify="center" style="margin: 50px">
				<el-input v-model="formInline.key" placeholder="请输入关键字搜索..." id="InputSearch" rows="4" size="medium" style="width: 570px">
					<template #prefix>
						<i class="el-input__icon el-icon-search" style="margin-top: 7px"></i>
					</template>
				</el-input>
				<el-button type="primary" @click="onQueryInfo" size="medium" icon="el-icon-search" style="width: 150px; font-size: 20px">查询</el-button>
				<!-- <el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="medium">导出</el-button> -->
			</el-row>
			<el-table
				id="tableExcel"
				ref="multipleTable"
				:data="tableData"
				:default-sort="{ prop: 'no', order: 'descending' }"
					:row-style="{ height: '37px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 2700px"
				highlight-current-row
				:row-class-name="tableRowClassName"
				@selection-change="handleSelectionChange"
			>
				<el-table-column align="center" label="序号" type="index" fixed="left" width="60" />
				<el-table-column align="center" property="caseNo" sortable prop="caseNo" label="案件编号" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column
					align="center"
					property="inspectionNo"
					sortable
					prop="inspectionNo"
					width="180"
					fixed="left"
					label="关联编号"
					show-overflow-tooltip
				/>
				<el-table-column align="center" property="caseName" sortable label="案件名称" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="no" sortable label="物品编号" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="name" sortable label="物品名称" width="120" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="quantity" sortable label="数量" width="80" show-overflow-tooltip />
				<el-table-column align="center" property="className" sortable label="物品类别" width="120" show-overflow-tooltip />
				<el-table-column align="center" property="statusName" sortable label="状态" width="80" show-overflow-tooltip />
				<el-table-column align="center" property="location" sortable label="存放位置" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="evidenceSource" sortable label="规格型号" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="shape" sortable label="物品属性" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionPersonName" sortable label="颜色" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionDateTime" sortable label="获取时间" width="100" show-overflow-tooltip>
					<template #default="scope">{{ `${dateFormat(scope.row.createTime)}` }}</template>
				</el-table-column>
				<el-table-column align="center" property="extractMethod" sortable label="获取方式" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionParts" sortable label="产地" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="describe" sortable label="物品特征" width="150" show-overflow-tooltip />
				<el-table-column align="center" property="createTime" sortable label="登记时间" width="180" show-overflow-tooltip>
					<template #default="scope">{{ `${dateFormats(scope.row.createTime, 'YYYY-MM-DD HH:mm')}` }}</template>
				</el-table-column>

				<el-table-column fixed="right" align="center" label="操作">
					<template #default="scope">
						<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[100, 200, 300, 400]"
				:page-size="10"
				layout="prev, pager, next, jumper,total,sizes"
				:total="total"
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useStore, user } from '/@/store/index';
import { useRouter } from 'vue-router';
import { queryInfo } from '/@/api/query/index';
import { exportExcel } from '/@/common/excel';
import { dateFormat, dateFormats } from '/@/common/index';

export default {
	name: 'queryOnekey',
	components: {},
	setup() {
		const store = useStore();
		const router = useRouter();

		const state = reactive({
			total: 0,
			formInline: {
				key: '',
				page: 1,
				pageSize: 10,
			},
			tableData: [],
		});

		function onQueryInfo() {
			if (state.formInline.key) {
				init();
			} else {
				ElMessage({ message: '请输入关键字', type: 'warning' });
			}
		}

		async function init() {
			await queryInfo(state.formInline.key, state.formInline.page, state.formInline.pageSize).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}

		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.id },
			});
		};

		const onHandleCurrentChange = (page) => {
			state.formInline.page = page;
			init();
		};

		const onHandleSizeChange = (pageIndex) => {
			state.formInline.pageSize = pageIndex;
			init();
		};

		const onExportExcel = () => {
			exportExcel('tableExcel', '物品数据', '查询-物品数据列表.xlsx');
		};

		return {
			onQueryInfo,
			onExportExcel,
			onHandleCurrentChange,
			onHandleSizeChange,
			onDetailsInfo,
			dateFormat,
			dateFormats,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
/deep/ .rowsearch #InputSearch {
	height: 50px;
	border: 1px solid #409eff;
}
</style>
